import React, { useState } from 'react';
import { Switch, Table,Input,Select,Space,DatePicker,Button  } from 'antd';
import type { TableColumnsType } from 'antd';
import type { DatePickerProps } from 'antd';
import type { Dayjs } from 'dayjs';
interface DataType {
 receiptitem:string
  /** 整批货款（单位：元） */
  totalPayment: string;
  /** 收款比例（0-100%） */
  receiptPercentage: number;
  /** 收款方式（如：银行转账、现金、支付宝等） */
  receiptMethod: string;
  /** 计划收款日期（ISO 格式字符串或 Date 对象） */
  plannedReceiptDate: string | Date;
  /** 备注（可选） */
  remark?: string;
}
import {
  PlusOutlined,
  DownloadOutlined,
  UploadOutlined,
  DeleteOutlined,
  ClockCircleOutlined,
  DownOutlined,
  SearchOutlined,
  FilterOutlined,
  BorderOutlined,
  MenuUnfoldOutlined,
  SyncOutlined,
  FullscreenOutlined
} from '@ant-design/icons';
const onChange: DatePickerProps<Dayjs[]>['onChange'] = (date, dateString) => {
  console.log(date, dateString);
};
const columns: TableColumnsType<DataType> = [
  {
    title: ' ',
    
    dataIndex: '',
    key: 0,
    
  },
  {
    title: '收款项',
   
    dataIndex: 'receiptitem',
    key: 1,
    
    render:(()=>{
        return <Select
    showSearch
    placeholder="Select a person"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: '整批贷款' },
      { value: '2', label: '定金' },
      { value: '3', label: '第一批贷款' },
      { value: '4', label: '第二批贷款' },
      { value: '5', label: '第三批贷款' },
    ]}
  />
    })
  },
  {
    title: '收款比例%',
   
    key: 2,
    dataIndex: 'totalPayment',
     render:(()=>{
        return <Input />
    })
  },
  {
    title: '收款金额/元',
   
    dataIndex: 'receiptPercentage',

    key: 3,
    render:(()=>{
        return <Input />
    })
  },
   {
    title: '收款方式',
   
    dataIndex: 'receiptitem',
    key: 4,
    
    render:(()=>{
        return <Select
    showSearch
    placeholder="Select a person"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: '银行转账' },
      { value: '2', label: '定金' },
      { value: '3', label: '现金支付' },
      { value: '4', label: '微信支付' },
      { value: '5', label: '支付宝支付' },
      { value: '6', label: '银行支票' }
    ]}
  />
    })
  },
  {
    title: '计划收款日期',
   
    dataIndex: 'plannedReceiptDate',

    key: 5,
    render:(()=>{
        return <Input />
    })
  },
  {
    title: '备注',
   
    key: 6,
    dataIndex: 'remark',
     render:(()=>{
        return <Input />
    })
  }
];



const App: React.FC = () => {
  const [dataSource, setdataSource] = useState([
    {
       receiptitem:"",
      totalPayment: "100%",
 
        receiptPercentage: 0.00,
        
        receiptMethod: "",
        
        plannedReceiptDate:"",
        remark: ""
    }
  ]);
  return (
    <div>
      <Table<DataType>
         style={{maxWidth:"100%"}}
      columns={columns}
      dataSource={dataSource}
     
    />

              <div style={{ marginTop: 16 }}>
                <Button icon={<PlusOutlined />} className='yanse2'  onClick={()=>{
                      let obj={
                                                receiptitem:"",
                        totalPayment: "100%",
                  
                          receiptPercentage: 0.00,
                          
                          receiptMethod: "",
                          
                          plannedReceiptDate:"",
                          remark: ""
                      }
                      setdataSource((aa)=>[...aa,obj])
                    }}>添加</Button>
                <Button icon={<ClockCircleOutlined />} className='yanse2' style={{ marginLeft: 8 }}>快速填报</Button>
              </div>
    </div>
  );
};

export default App;